<template>
	<view class="flex-col page">
		<view class="flex-col section">
		  <text>发起接龙</text>
		</view>
		<!-- 搜索功能 -->
	、
		<view class="flex-col section2">
      <view class="flex-row section2-item" >
        <view class="section2-title">标题</view>
        <view class="section2-content">
			    <input placeholder="请输入标题" v-model="model.标题"/>
        </view>
      </view>
      <view class="flex-row section2-item">
       <view class="section2-title">介绍</view>
	  	  <view class="section2-content">
			  <textarea class="section2-textarea" v-model="model.介绍"></textarea>
		   </view>
      </view>
      <view class="flex-row section2-item">
		    <view class="section2-title">价格</view>
        <view class="section2-content">
          <input type="digit" placeholder="请输入价格" v-model="model.价格"/>
        </view>
      </view>
      <view class="flex-row section2-item">
        <view class="section2-title">发布时间</view>
        <view class="section2-content">
          <picker mode="date"   @change="onDateChangeFB">
            <input :disabled="true" placeholder="请选择发布时间" v-model="model.发布时间"/>
          </picker>
        </view>
      </view>
      <!--          <uni-datetime-picker
              type="datetime"
              v-model="model.截至时间"
              @change="onDateChangeJZ"
          />-->
      <view class="flex-row section2-item">
        <view class="section2-title">截至日期</view>
        <view class="section2-content">
          <picker mode="date"   @change="onDateChangeEndDate">
            <input :disabled="true" placeholder="请选择截至日期" v-model="model.截至日期"/>
          </picker>
        </view>
      </view>
      <view class="flex-row section2-item">
		    <view class="section2-title">截至时间</view>
        <view class="section2-content">
          <picker mode="time"   @change="onDateChangeEndTime">
            <input :disabled="true" placeholder="请选择截至时间" v-model="model.截至时间"/>
          </picker>
        </view>
      </view>
      <view class="flex-row section2-item">
        <view class="section2-title">选择图片</view>
        <view class="section2-content">
            <uni-file-picker ref="files" limit="3" title="最多选择3个图片"
             fileMediatype="image"
             mode="grid"
             @select="select"
             @progress="progress"
             @success="handlesuccess"
             @fail="fail"
			 @delete="handleDelete"
            />
        </view>
      </view>
      <view class="flex-row  section2-tijiao">
        <text class="flex-row justify-center items-center bottom-bar-btn2 " @click="handleAdd">发起接龙</text>
      </view>
		</view>

	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				model:{
					标题:"",
					图片组:[],
				}
			}
		},
		onLoad() {
			
		},
		methods: {
      onDateChangeEndDate(e) {
        this.model.截至日期 = e.detail.value;

      },
      onDateChangeEndTime(e) {
        this.model.截至时间 = e.detail.value;
      },
      handleAdd(){
        uniCloud.importObject("tb_jielong").add(this.model).then(res=>{
		  if(res.success){
			uni.showToast({
				title:res.message
			})  
            uni.navigateBack();
        }

		 })
      },
      select(e){
      },
      progress(){
	  },
      handlesuccess(e){
		console.log('选择文件success：',e.tempFilePaths)  
		this.model.图片组=e.tempFilePaths
	  },
      fail(){
		console.log('选择文件fail：')  
	  },
	  handleDelete(e){
		  console.log('选择文件fail：',e.index)  
		  this.model.图片组.splice(e.index, 1)
	  },
      ttt(){
   
		uni.chooseMedia({
			success:(res)=>{
				console.log(res)
			},
			fail:(err)=>{
				console.log(err)
			}
		})
        /* wx.chooseMedia({
          count: 6, //默认9
          // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          // sourceType: ['album'], //从相册选择
          success:  (res)=> {
            console.log(JSON.stringify(res.tempFilePaths));
          }
        }); */
      }
		}
	}
</script>

<style>
.pages {
  //background-color: #FFFFFF;
  background-color: #f1f1f1;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  margin-right: 10rpx;
}

.main {
  justify-content: space-between;
  flex: 1;
}

.title {
  font-size: 16px;
}

.info {
  flex-direction: row;
  justify-content: space-between;
}

.author,
.last_modify_date {
  font-size: 14px;
  color: #999999;
}

.uni-search-box {
  background-color: #FFFFFF;
  position: sticky;
  height: 50px;
  top: 0;
  left: 0;
  /* #ifndef APP-PLUS */
  z-index: 9;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  width: 580rpx;
  /* #endif */
}
.cover-search-bar {
  height: 50px;
  position: relative;
  top: -50px;
  margin-bottom: -50px;
  /* #ifndef APP-NVUE */
  z-index: 999;
  /* #endif */
}
.load-state{
  justify-content: center;
  width: 750rpx;
}
.section {
  padding: 120rpx 28rpx 186rpx;
  background-image: linear-gradient(180deg, #81e2fc 0%, #f1f1f1 100%);
}
.section2{
  margin-top: -80rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;

}
.section2-item{
  padding: 20rpx;
}
.section2-title{
  width: 150rpx;
}
.section2-tijiao{
  margin-top: 30rpx;
  color: #ffffff;
}
.section2-content{
  width: 460rpx;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.section2-textarea{
  width: 460rpx;
  height: 300rpx;
  border: 1rpx solid #f1f1f1;
}
.bottom-bar{
  position: fixed;
  width: 100%;
  background-color: #ffffff;
  height: 120rpx;
  bottom: 0;
}
.bottom-bar-btn2{
  background-color: #81e2fc;
  width: 700rpx;
  height: 70rpx;
  border-radius: 15rpx;
}
.picker{
  width: 400rpx;
  height: 40rpx;
}
.section3{
  padding: 20rpx 28rpx 136rpx;
}
.image1{
  width: 100rpx;
  height: 100rpx;
  background-color: #81e2fc;
  margin:  10rpx;
}
.item-content{
  background-color: #ffffff;
  padding: 20rpx 28rpx 20rpx 28rpx;
  /* height: 300rpx; */
  border-radius: 20rpx;
}
.item-content-diliver{
  height: 2rpx;
  background-color: #8f8f94;
}
.item-content-avater{
  background-color: #81e2fc;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}
.jielong-avtar{
  background-color: #ff557f;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: -10rpx;
  border: 1px solid #f1f1f1;
}
.jielong-avtar2{
  background-color: #ff557f;
  width: 50rpx;
  height: 50rpx;
  padding-left: -10rpx;
  border-radius: 50%;
}
.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
